<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .outer{
            width: 650px;
            height: 380px;
            margin: 50px auto;
            padding: 10px;
            background-color: greenyellow;
            text-align: center;
        }
    </style>
    <script>
            window.onload=function(){
                /* 
                    点击按钮切换图片
                */

                //获取两个按钮
                var prev=document.getElementById("prev");
                var next=document.getElementById("next");
                /* 
                    要切换图片就是要修改img标签的src属性
                */
                //获取img标签,返回的时一个数组
                var img=document.getElementsByTagName("img")[0];
                // alert(img);
                //创建一个数组，用来保存图片的路径
                var imgArr=["../mi/img/ad1.jpg","../mi/img/ad2.png","../mi/img/ad3.jpeg"]
                //创建一个索引
                var index=0;

            //获取id 为info的p元素
            var info=document.getElementById("info");
            //设置提示文字
            info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
                //分别为两个按钮绑定单击响应函数
                prev.onclick=function(){
                    // alert("上一张");
                    /* 
                        切换到上一张，索引自减
                    */
                   index--;
                   //判断index是否小于0
                   if(index<0){
                       index=imgArr.length-1;
                   }
                   img.src=imgArr[index];
                   //当点击按钮以后，重新设置信息
                   info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";

                };
                next.onclick=function(){
                    // alert("下一张");
                    //切换图片就是修改img的src属性
                    //要修改一个元素的属性元素 元素.属性=属性值
                    /* 
                        切换到下一张，索引自增
                    */
                    index++;
                     //判断index是否大于2
                   if(index>imgArr.length-1){
                       index=0;
                   }
                   img.src=imgArr[index];
                    //当点击按钮以后，重新设置信息
                    info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
                
                }
            }
    </script>
</head>
<body>
   <div class="outer">

    <P id="info"></P>
    <img src="../mi/img/ad1.jpg" alt="01">
    <button id="prev">上一张</button>
    <button id="next">下一张</button>

   </div> 
</body>
</html>